<template>
  <view class="content">
    <view class="tab-block">
      <u-tabs :list="tabList" :scrollable="false" :activeStyle="{ fontSize: '28rpx', color: '#3C9CFF' }" :inactiveStyle="{ fontSize: '28rpx' }" @click="tabClick"></u-tabs>
    </view>
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index" @click="routeToDetail(item.id, item.planExeId, item.checkPeriod, getRemainingTime(nowDateTime, item.endTime), item.exeState)">
        <view class="header-block border-b-common pb-20">
          <view class="date-block">排查周期：{{item.checkPeriod == 1 ? '1日' : item.checkPeriod == 2 ? '1周' : item.checkPeriod == 3 ? '1月' : item.checkPeriod == 4 ? '6月' : '12月'}}一次</view>
          <view class="date-block">剩余时间：{{getRemainingTime(nowDateTime, item.endTime)}}</view>
          <u-tag size="mini" plain :type="params.states == 0 ? 'primary' : 'success'" :text="params.states == 0 ? '待执行' : '已执行'"></u-tag>
        </view>
        <view class="body-block border-b-common pb-10">
          <view class="body-item pt-20 pb-25">任务名称：{{item.planName ? item.planName : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          <view class="body-item pt-20 pb-25">本次排查开始时间：{{item.startTime ? formatTime(item.startTime) : '-'}}</view>
          <view class="body-item pt-20 pb-25">本次排查结束时间：{{item.endTime ? formatTime(item.endTime) : '-'}}</view>
        </view>
        <view class="footer-block pt-20">
          <view v-if="params.states == 0" class="button-block">
            <u-button class="button" type="primary" :customStyle="{width: '120rpx', height: '50rpx', margin: '0 20rpx'}" text="执行"></u-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
  </view>
</template>

<script>
  import { getCheckTaskListApi } from '@/apis/danger/index.js'
  import dayjs from 'dayjs'
  
  export default {
    data() {
      return {
        tabList: [
          { name: '待执行', value: 0 },
          { name: '已执行', value: 1 },
        ],
        params: {
          pageNo: 1,
          pageSize: 10,
          exeState: 0,
          states: 0
        },
        list: [],
        nowDateTime: dayjs().valueOf(),
        pushState: true,
        type: '',
      }
    },
    onPullDownRefresh() {
      this.getCheckTaskList(Object.assign(this.params, {pageNo: 1, pageSize: 10}))
    },
    onReachBottom() {
      if(this.pushState) this.getCheckTaskList(Object.assign(this.params, {pageNo: this.params.pageNo + 1}), false)
    },
    onShow() {
      this.getCheckTaskList(Object.assign(this.params, {pageNo: 1}))
    },
    methods: {
      getCheckTaskList: function(params, freshState = true) {
        getCheckTaskListApi(params).then(res => {
          if(freshState) {
            this.pushState = true
            this.list = res.list
          } else {
            this.list = this.list.concat(res.list)
          }
          if(res.list.length < this.params.pageSize) this.pushState = false
          uni.stopPullDownRefresh()
        }).catch(err => console.warn(err))
      },
      getRemainingTime: function(startTime = dayjs().format('YYYY-MM-DD HH:mm:ss'), endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')) {
        // 剩余小时
        const hour = startTime && endTime && (dayjs(startTime).valueOf() < dayjs(endTime).valueOf()) ? dayjs(endTime).diff(startTime, 'hour') : 0;
        // 剩余天数
        let dayLeft = Math.floor(hour / 24);
        // 返回的字符串
        let returnString = '';
        
        if (dayLeft >= 1) {
          returnString = `${dayLeft}天 ${hour - (dayLeft * 24)}小时`
        } else {
          returnString = `${hour}小时`
        }
        return returnString
      },
      tabClick: function(event) {
        console.log(event)
        if(event.value == 0) {
          this.type = 0
        } else {
          this.type = 1
        }
        Object.assign(this.params, { states: event.value,exeState: event.value, pageNo: 1})
        this.getCheckTaskList(this.params)
      },
      formatTime: function(time) {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      },
      routeToDetail: function(planId, planExeId, checkPeriod, endTime, state) {
        uni.navigateTo({ url: `/pagesDanger/checkTaskDetail?planId=${planId}&planExeId=${planExeId}&checkPeriod=${checkPeriod}&endDate=${endTime}&state=${state}&type=${this.type}` })
      }
    }
  }
</script>

<style>
  page {
    background-color: #F4F4F4;
  }
</style>

<style lang="scss" scoped>
  .border-b-common { 
    border-bottom: 1rpx solid #F4F4F4; 
  }
  .content {
    padding: 90rpx 25rpx 50rpx 25rpx;
    .tab-block {
      background-color: #FFFFFF;
      z-index: 99;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    .list-block {
      .item-block {
        background-color: #FFFFFF;
        border-radius: 6rpx;
        box-shadow: 0 0 10rpx 0 #F4F4F4;
        padding: 25rpx;
        margin-top: 25rpx;
        .header-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .date-block {
            width: 260rpx;
            font-size: 24rpx;
            line-height: 32rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .body-block {
          .body-item {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .footer-block {
          @extend .header-block;
          align-items: flex-end;
        }
        .button-block {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .button {
            width: 100rpx;
          }
        }
      }
    }
    .empty-block {
      padding-top: 300rpx;
    }
  }
</style>
